<template>
  <view>
    <Header @scrolltolower="scrolltolower"></Header>
    <play-list></play-list>
    <!-- 音乐播放器 -->
      <Music></Music>
  </view>
</template>

<script setup>
  import Header from './components/header/header.vue'
  import playList from './components/playList/playList.vue'
  import Music from '@/common/components/Music/Music.vue'
  import {
    ref,
    reactive,
    watch
  } from 'vue'
  import {
    onLoad,
    onReachBottom
  } from '@dcloudio/uni-app'
  
  import { storeToRefs } from 'pinia'
  import { useMusicStore } from '@/store/modules/musicStore.js'
  import { useCommontStore } from '@/store/modules/commontStore.js'
  const musicStore = useMusicStore()
  const commontStore = useCommontStore()
  const { getPlaylistAllData,getPlaylistDetail } = musicStore
  const { getPlaylistReview } = commontStore
  
  const queryInfo = reactive({
    limit: 10,
    offset: 0
  })
  
  const commontQuery = reactive({
    limit:20,
    offset:0,
    brfore:null
  })
  
  // 监听评论到底获取新数据
  const scrolltolower = () => {
    if(commontQuery.offset >= commontStore.playlistReview.total) return;
    commontQuery.offset += commontQuery.limit
    getPlaylistReview(routeId.value,commontQuery.limit,commontQuery.offset)
  }
  
  // 获取传参id
  const routeId = ref(0)
  onLoad((options) => {
    routeId.value = options.id
    getPlaylistDetail(options.id)
    getPlaylistAllData(options.id,queryInfo.limit,queryInfo.offset)
    getPlaylistReview(options.id,commontQuery.limit,commontQuery.offset)
  })
  // 节流阀
  const flag = ref(false)
  // 监听下滑底部
  onReachBottom(async ()=>{
    if(!flag.value){
      flag.value = true
      if(queryInfo.offset >= musicStore.playlistDetail.trackCount)return;
      queryInfo.offset += queryInfo.limit
      await getPlaylistAllData(routeId.value,queryInfo.limit,queryInfo.offset)
      flag.value = false
    }
  })
</script>

<style>

</style>
